<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <!-- bootstrap表格 -->
    <link rel="stylesheet" href="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="setup_msg">
        <div class="header">
            <!-- <div class="back">返回</div> -->
            <div class="type_select_wrapper">
                <ul class="type_ul">
                    <li>新建群发任务</li>
                </ul>
            </div>
        </div>
        <div class="setup_msg_container">
            <!-- 2020-03-16 start -->
            <div class="msg_times">您本周已下达1次群发任务，最近一次在星期三，本周还可以给2000个客户发送群发消息，点击<span class="on_msg_detail">查看详情</span></div>
            <div class="tips_wrapper"><span class="tips_text"><i class="iconfont icon-zhuyi"></i>注意：同一个企业对一个客户一个自然周内（周一至周日）至多只能发送一条消息，超过限制的用户将会被忽略</span></div>
            <!-- 2020-03-16 end -->
            <div class="msg_wrapper">
                <!-- 2020-03-16 start -->
                <div class="send_cus" id="send_cus">选择发送的客户</div>
                <!-- 2020-03-16 end -->
                <div class="send_cus sended_cus" id="sended_cus" style="display: none;">分别发送给：<span
                        class="sended_type"></span><span class="sended_edit">修改</span></div>
                <div class="variable_wrapper">
                    <span class="variable_text">插入变量：</span>
                    <div class="variable_itemlist">
                        <div class="item" data-id="0" data-text="${name}">姓名</div>
                        <div class="item" data-id="1" data-text="${sex}">性别</div>
                        <div class="item" data-id="2" data-text="${lsn}">车牌号</div>
                        <div class="item" data-id="3" data-text="${shopname}">店名</div>
                    </div>
                </div>
                <div class="text_container">
                    <div class="textarea_box">
                        <textarea class="textarea" id="msg" placeholder="输入消息内容..." maxlength="4000"></textarea>
                    </div>
                </div>
                <div class="addImage">
                    <div class="add_image_wrapper">
                        <i class="iconfont icon-ic_add"></i>
                        <span>添加图片</span>
                        <input class="upload_image_input" type="file" accept="image">
                    </div>
                    <div class="image_show_wrapper" id="image_show_wrapper">
                    </div>
                </div>
                <div class="send_btn_container">
                    <a class="normal_btn send_btn" href="javascript:;" id="notice_send">通知成员发送</a>
                    <span class="send_desc">通知成员，向选中的客户发送以上企业消息</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 2020-02-24 start -->
    <!-- 新建消息模态框 -->
    <div class="modal fade" id="setup_modal" tabindex="-1" role="dialog" aria-labelledby="setup_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="setup_modal_label">选择客户</h4>
                </div>
                <div class="modal-body">
                    <form class="layui-form">
                        <div class="send_wrapper">
                            <div class="send_item">
                                <div class="left_text select_type_text">选择方式</div>
                                <div class="right_select">
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <input type="radio" lay-filter="send_type" name="type" value="Excel导入"
                                                title="Excel导入">
                                            <input type="radio" lay-filter="send_type" name="type" value="全部客户"
                                                title="全部客户" checked>
                                            <input type="radio" lay-filter="send_type" name="type" value="按条件筛选的客户"
                                                title="按条件筛选的客户">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- excel导入 -->
                            <div class="send_item screen_excel_import" id="screen_excel_import" style="display: none;">
                                <div class="excel_wrapper">
                                    <div class="select_excel_box">
                                        <div class="select_text">选择文件</div>
                                        <input class="excel_input" id="excel_input" name="excel_input" type="file"
                                            accept="application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                                    </div>
                                    <span class="input_file_name" style="display: none;"></span>
                                    <a class="download_template" href="javascript:;">下载模板</a>
                                </div>
                            </div>

                            <!-- 按条件筛选的客户 -->
                            <div class="send_item screen_send_item" id="screen_condition" style="display: none;">
                                <div class="left_text">筛选条件</div>
                                <div class="right_select">
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <div class="add_text" id="addperoson_modal_show">选择添加人</div>
                                        </div>
                                        <div class="selectedMembers" style="display: none;">
                                            <div class="add_logo">已选择</div>
                                            <div class="selected_members member_items" id="selected_dep_members">

                                            </div>
                                        </div>

                                        <div class="add_logo">标签</div>
                                        <div class="layui-input-block">
                                            <input type="checkbox" lay-filter="send_logo" name="logo" lay-skin="primary"
                                                value="一般" title="一般">
                                            <input type="checkbox" lay-filter="send_logo" name="logo" lay-skin="primary"
                                                value="重要" title="重要">
                                        </div>
                                        <div class="send_tip" style="display: none;">将发送消息给<span
                                                class="first_selected_member"></span>等 <span
                                                class="selected_number"></span> 人添加的客户</div>
                                        <div class="send_tip_total" style="display: none;">将发送消息给<span
                                                class="first_selected_member"></span>等 <span
                                                class="selected_number"></span> 人添加的，且满足“<span
                                                class="selected_logo"></span>”等标签的客户</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="submit_send_msg">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 新建消息模态框 -->
    <!-- 2020-02-24 end -->

    <!-- 添加人模态框 -->
    <div class="modal fade" id="addperson_modal" tabindex="-1" role="dialog" aria-labelledby="addperson_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addperson_modal_label">选择发送范围</h4>
                </div>
                <div class="modal-body">
                    <div class="select_person_wrapper">
                        <div class="left_wrapper">
                            <div class="protree_container"></div>
                        </div>
                        <div class="right_wrapper">
                            <div class="title">已选择的部门或成员</div>
                            <div class="selected">
                                <div class="department_members selected_department" id="selected_department">

                                </div>
                                <div class="department_members selected_members" id="selected_members">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="submit_dep_member">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 添加人模态框 -->

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <!-- bootstrap表格 -->
    <script src="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.js"></script>
    <script src="../../js//bootstrap/js/bootstrap-table-master/bootstrap-table-zh-CN.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <!-- 添加人数据 -->
    <script src="../../js/addPerson_data/data.js"></script>
    <!-- 树形结构 -->
    <script src="../../js/proTree.js"></script>
    <!-- 压缩图片 -->
    <script src="../../js/exif.js"></script>
    <!-- 上传图片 -->
    <script src="../../js/addPerson_data/upload-image.js"></script>
    <script>
        //后台传入的 标题列表
        var arr = [
            {
                id: 1,
                name: "长沙峰之道",
                pid: 2,
                department: true,
                Useful: true
            },
            {
                id: 2,
                name: "长沙沃邦",
                pid: 0,
                department: true,
                Useful: true
            },
            {
                id: 'ZhaoHongRui',
                name: '赵虹蕊',
                pid: 1,
                department: false,
                Useful: true
            },
            {
                id: "LiuYiHua",
                name: "刘毅华",
                pid: 1,
                department: false,
                Useful: true
            },
            {
                id: "YeKaiQi",
                name: "叶铠齐",
                pid: 1,
                department: false,
                Useful: true
            },
        ];
        layui.use("form", function () {
            var form = layui.form;
            let send_type = "全部客户"; // 发送类型
            let send_logo = []; // 发送标签

            // 2020-03-16 start
            // 页面跳转
            $(".on_msg_detail").click(function() {
                parent.location.href = "cus-contact.html?nav_index=1"
            })
            // 2020-03-16 end


            // 2020-02-24 start
            // 发送类型
            form.on("radio(send_type)", function (data) {
                console.log(data.value)
                if (data.value == "按条件筛选的客户") {
                    $("#screen_condition").show();
                    $("#screen_excel_import").hide();
                } else if (data.value == "Excel导入") {
                    $("#screen_condition").hide();
                    $("#screen_excel_import").show();
                } else {
                    $("#screen_excel_import").hide();
                    $("#screen_condition").hide();
                    send_logo = [];
                    totalDatalist = [];
                }
                send_type = data.value;
            });
            // 2020-02-24 end

            // 发送标签
            form.on("checkbox(send_logo)", function (data) {
                if (data.elem.checked == true) {
                    send_logo.push(data.elem.title);
                } else {
                    for (let i = 0; i < send_logo.length; i++) {
                        if (send_logo[i] == data.elem.title) {
                            send_logo.splice(i, 1);
                        }
                    }
                }
                // 2020-02-25 start
                if (send_logo.length > 0 && totalDatalist.length > 0) {
                    $(".selected_logo").text([...send_logo]);
                    $(".send_tip_total").show()
                    $(".send_tip").hide()
                } else if (send_logo.length == 0 && totalDatalist.length > 0) {
                    $(".send_tip_total").hide()
                    $(".send_tip").show()
                } else {
                    $(".send_tip_total").hide()
                    $(".send_tip").hide()
                }
                // 2020-02-25 end
            });

            // 点击添加人 打开添加模态框 且 重新加载已选择的成员
            $("#addperoson_modal_show").click(function () {
                $("#addperson_modal").modal("show");
                console.log(depSelected, memberSelected)
                let html1 = "";
                let html2 = "";
                for (let i = 0; i < depSelected.length; i++) {
                    html1 += `
                        <div class="dep_item">
                            <i class="iconfont icon-wenjianjia"></i>
                            <span data-id="${depSelected[i].id}" data-pid="${depSelected[i].pid}" data-dep="${depSelected[i].dep}" data-useful="${depSelected[i].Useful}">${depSelected[i].name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `;
                }
                for (let j = 0; j < memberSelected.length; j++) {
                    html2 += `
                        <div class="mem_item">
                            <i class="iconfont icon-geren"></i>
                            <span data-id="${memberSelected[j].id}" data-pid="${memberSelected[j].pid}" data-dep="${memberSelected[j].dep}" data-useful="${depSelected[i].Useful}">${memberSelected[j].name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `;
                }
                $("#selected_department").html(html1);
                $("#selected_members").html(html2);
            });
            // 2020-03-09 start
            $("#send_cus").click(function () {
                $("#setup_modal").modal("show");
            });
            // 2020-03-09 end

            $(".sended_edit").click(function () {
                $("#setup_modal").modal("show");
            });
            let depSelected = []; // 选择的部门
            let memberSelected = []; // 选择的成员
            let totalDatalist = []; // 部门、成员总集合
            //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
            $(".protree_container").ProTree({
                arr: arr,
                close: true,
                simIcon: "iconfont icon-geren", //单个标题字体图标 不传默认glyphicon-file
                mouIconOpen: "iconfont icon-wenjianjia1", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
                mouIconClose: "iconfont icon-wenjianjia", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
                callback: function (id, name, pid, department, useful) {
                    let data = {
                        id: id,
                        name,
                        pid: parseInt(pid),
                        department,
                        Useful: useful
                    };
                    if (department == true || department == 'true') {
                        data.id = parseInt(id)
                        data.department = true
                    } else if (department == 'false') {
                        data.department = false
                    }
                    console.log(data);
                    if (data.department) {
                        depSelected.push(data);
                        $("#selected_department").append(`
                        <div class="dep_item">
                            <i class="iconfont icon-wenjianjia"></i>
                            <span data-id="${data.id}" data-pid="${data.pid}" data-dep="${data.department}" data-useful="${data.Useful}">${data.name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `);
                    } else {
                        memberSelected.push(data);
                        $("#selected_members").append(`
                        <div class="mem_item">
                            <i class="iconfont icon-geren"></i>
                            <span data-id="${data.id}" data-pid="${data.pid}" data-dep="${data.department}" data-useful="${data.Useful}">${data.name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `);
                    }
                }
            });

            // 删除部门、成员
            $(".department_members").on("click", ".delete_dep_mem", function () {
                let id = $(this)
                    .siblings("span")
                    .attr("data-id");
                let dep = $(this)
                    .siblings("span")
                    .attr("data-dep");
                $(this)
                    .parent()
                    .remove();
                if (dep) {
                    for (let i = 0; i < depSelected.length; i++) {
                        if (id == depSelected[i].id) {
                            depSelected.splice(i, 1);
                            break;
                        }
                    }
                } else {
                    for (let i = 0; i < memberSelected.length; i++) {
                        if (id == memberSelected[i].id) {
                            memberSelected.splice(i, 1);
                            break;
                        }
                    }
                }
            });
            // 删除已选择部门、成员
            $(".selected_members").on("click", ".delete_dep_mem", function () {
                let id = $(this)
                    .siblings("span")
                    .attr("data-id");
                let dep = $(this)
                    .siblings("span")
                    .attr("data-dep");
                $(this)
                    .parent()
                    .remove();
                if (dep) {
                    for (let i = 0; i < depSelected.length; i++) {
                        if (id == depSelected[i].id) {
                            depSelected.splice(i, 1);
                            break;
                        }
                    }
                } else {
                    for (let i = 0; i < memberSelected.length; i++) {
                        if (id == memberSelected[i].id) {
                            memberSelected.splice(i, 1);
                            break;
                        }
                    }
                }
                for (let j = 0; j < totalDatalist.length; j++) {
                    if (id == totalDatalist[j].id) {
                        totalDatalist.splice(j, 1);
                        break;
                    }
                }
                // 2020-02-25 start
                if (totalDatalist.length == 0) {
                    $(".selectedMembers").hide();
                    $(".send_tip_total").hide();
                    $(".send_tip").hide()
                } else {
                    $(".first_selected_member").text(totalDatalist[0].name)
                    $(".selected_number").text(totalDatalist.length);
                }
                // 2020-02-25 end
                console.log(totalDatalist);
            });

            // 拿到需要发送的部门、成员列表
            $("#submit_dep_member").click(function () {
                totalDatalist = [];
                totalDatalist = totalDatalist.concat(depSelected, memberSelected);
                let html = "";
                for (let i = 0; i < totalDatalist.length; i++) {
                    html += `
                    <div class="member_item">
                        <i class="iconfont ${
                        totalDatalist[i].department == "true"
                            ? "icon-wenjianjia"
                            : "icon-geren"
                        }"></i>
                        <span data-id="${totalDatalist[i].id}" data-dep="${
                        totalDatalist[i].department
                        }" data-pid="${totalDatalist[i].pid}">${totalDatalist[i].name}</span>
                        <i class="iconfont icon-shanchu delete_dep_mem"></i>
                    </div>
                `;
                }
                $("#selected_dep_members").html(html);
                $(".selected_number").text(totalDatalist.length);
                if (totalDatalist.length > 0) {
                    $(".first_selected_member").text(totalDatalist[0].name)
                    $(".send_tip").show()
                }
                $("#addperson_modal").modal("hide");
                $(".selectedMembers").show();
            });
            function getMember(depMember, depList) {
                if (depList && depList.length > 0) {
                    for (let i = 0; i < depList.length; i++) {
                        if (depList[i].department == true || depList[i].department == 'true') {
                            let m = []
                            for (let j = 0; j < arr.length; j++) {
                                if (arr[j].pid == depList[i].id) {
                                    m.push(arr[j])
                                }
                            }
                            getMember(depMember, m)
                        } else if (depList[i].department == false || depList[i].department == 'false') {
                            if (depList[i].Useful) {
                                depMember.push(depList[i])
                            }
                        }
                    }
                }
            }
            // 确认发送给的客户
            $("#submit_send_msg").click(function () {
                // 取出选中的部门中的所有成员
                let depMember = []
                getMember(depMember, totalDatalist)
                // 成员去重
                for (var i = 0; i < depMember.length; i++) {
                    for (var j = i + 1; j < depMember.length; j++) {
                        if (depMember[i].id == depMember[j].id) {
                            depMember.splice(j, 1);
                        }
                    }
                }
                console.log(
                    "发送类型",
                    send_type,
                    "发送标签",
                    send_logo,
                    "添加人",
                    depMember
                );

                $("#setup_modal").modal("hide");
                $(".sended_type").html(send_type + "(共计5038名客户)，其中筛选失败客户数5位" + "<span class='onFailCusDetail'>(查看详情)</span>");
                $("#sended_cus").show();
                $("#send_cus").hide();
            });
            // 上传图片
            upload_image(".upload_image_input", "#image_show_wrapper"); // 第一个参数为上传图片的input类名，第二个为图片显示的类名
            // 删除上传的图片
            $(".image_show_wrapper").on("click", ".image_delete", function () {
                // 获取图片路径
                let imgSrc = $(this).prev(".upload_image").attr('src');
                $(this).parent().remove();
                $(".add_image_wrapper").show();
                console.log(imgSrc)
            });

            // 通知成员发送
            $("#notice_send").click(function () {
                let msg = $("#msg").val();
                console.log(
                    "发送类型",
                    send_type,
                    "发送标签",
                    send_logo,
                    "添加人",
                    totalDatalist,
                    "消息内容",
                    msg
                );
            });

            // 2020-02-24 start
            // excel导入客户
            $("#excel_input").on('change', function (e) {
                var fileObj = e.currentTarget.files[0]; // js 获取文件对象
                console.log('fileObj', fileObj)
                if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
                    alert("请选择文件");
                    return;
                }
                $(".input_file_name").show()
                $(".input_file_name").text(fileObj.name)
                $(".input_file_name").attr('title', fileObj.name)
                var formdata = new FormData();
                formdata.append('fileType_file', fileObj);
                formdata.append('fileType', "import_cus");
                // 执行ajax请求
                // $.ajax({
                //     url: "",
                //     type: 'POST',
                //     dataType: 'json',
                //     processData: false,
                //     contentType: false,
                //     cache: false,
                //     data: formdata
                // })
                //     .done(function (data) {
                //         // 请求完毕do something
                //     })
                //     .fail(function () {
                //         console.log("error");
                //     })
                var index = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                // 模拟导入成功效果
                setTimeout(() => {
                    layer.close(index)
                    layer.msg('导入成功')
                }, 2000)
            });

            // 点击变量 文本域中添加变量值
            $(".variable_itemlist").on('click', '.item', function () {
                let oldValue = $("#msg").val();
                let newValue = oldValue + $(this).attr('data-text');
                $("#msg").val(newValue);
            })
            // 2020-02-24 end
        });

    </script>
</body>

</html>